<template>
  <view class="main-container">
    <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
      <view class="cu-item" :class="index==TabCur?'text-cyan cur':''" v-for="(item,index) in subList" :key="index"
        @tap="() => tabSelect(item, index)" :data-id="index">
        {{item.subName}}
      </view>
    </scroll-view>
  </view>
</template>
<script>
  export default {
    created() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        this.getSubList();
      },
      // 点击触发事件
      tabSelect(item, index) {
        this.TabCur = index;
        this.scrollLeft = (index - 1) * 60;
        this.TabCur = index;
        this.$emit("clickSub", item.subId);
      },
      clearTab() {
        this.TabCur = 0
      },
      // 获取病情分类的方法
      async getSubList() {
        // 发起请求
        const {
          data: res
        } = await uni.$http.get('/illsub/list/3')
        // 判断是否获取失败
        if (res.code !== 200) return uni.$showMsg()
        // 转存数据
        this.subList = res.data
        this.subId = this.subList[0].subId;
        this.$emit("clickSub", this.subId);
        this.TabCur = 0
      },
    },
    data() {
      return {
        subList: [],
        subId: '',
        TabCur: 0,
        scrollLeft: 0
      };
    }

  }
</script>
<style lang="scss">

</style>